<template>
    <div class="nav">
        <div class="left">
            <span v-for="i in navArr">{{ i }}</span>
        </div>
        <div class="right">
            <span v-for="i in navInfo">{{ i }}</span>
            <span class="green">良</span>
            <span>设置</span>
            <img class="navLogo" src="../assets//images//logo.jpg" alt="">
            <span>159******81</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const navArr = reactive(['新闻', 'hao123', '地图', '贴吧', '视频', '图片', '网盘', '文库', '更多'])
const navInfo = reactive(['台江', '☀', '14°'])

</script>

<style scoped>
.nav {
    width: 100%;
    font-size: 0.084rem;
    display: flex;
    justify-content: space-between;

    .left {
        span {
            padding-right: 0.195rem;
        }

        span:hover {
            cursor: pointer;
            color: var(--hover-blue);
        }

    }

    .right {
        span {
            padding-left: 0.13rem;
        }

        span:hover {
            cursor: pointer;
            color: var(--hover-blue);;
        }

        .green {
            padding: 0.013rem 0.052rem;
            color: white;
            background-color: rgb(130, 201, 30);
            border-radius: 0.065rem;
            font-size: 0.078rem;
            margin-left: 0.13rem;
        }

        .navLogo {
            border: 1px solid rgb(97, 128, 243);
            width: 0.195rem;
            border-radius: 50%;
            position: relative;
            top: 0.065rem;
            margin-left: 0.195rem;
        }
    }
}
</style>